<template>
    <div class="breadCrumb">
        <!-- <a href="">首页/</a>
        <a href="">首页</a> -->

        <!-- to,通过具名路由的名字来实现跳转 -->
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">
            {{item.meta.name + separator}} 
        </router-link>
    </div>
</template>
<script setup>
import {toRefs, watchEffect} from "vue"
// 父子传参，App.vue和breadCrumb传递面包屑的数据
// 声明props,接收App.vue传来的面包屑数据
let props = defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    separator:{
        type:String,
        default(){
            return "/"
        }
    }
})
console.log(props);
// 侦听props中的data数据的变化情况
watchEffect(()=>{
    console.log('读取到的data===',props.data);
})
// 解构props
let {data,separator} = toRefs(props)

</script>
<style scoped>
.breadCrumb{
    border: 1px solid pink;
    margin:10px 0;
}
.breadCrumb a {
    font-size: 16px;
    font-weight: 700;
    color:black;
    margin: 0 5px;
}
</style>